<template>
  <div class="edit-container">
      <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="用户名称:" >
            <div>{{form.username}}</div>
          </el-form-item>
          <el-form-item label="记录:" >
            <div>{{form.content}}</div>
          </el-form-item>
        <template v-if="form.picList">
          <el-form-item :label="'图片('+(form.picList.length) +'/9)：'">
            <div class="acea-row">
              <div
                  v-for="(item,index) in form.picList"
                  :key="index"
                  class="pictrue mb10"
                  draggable="true"
              >
                <el-image
                    v-if="item"
                    class="photo-el-image"
                    :src="item"
                    :preview-src-list="form.picList"
                    style="height: 120px;margin: 30px 30px 0 0;"
                />
              </div>
            </div>
          </el-form-item>
        </template>
        <template v-if="form.videoList">
          <el-form-item :label="'视频('+(form.videoList.length) +'/9)：'">
            <div class="acea-row">
              <div
                  v-for="(item,index) in form.videoList"
                  :key="index"
                  class="videoBox"
                  draggable="true"
              >
                <video v-if="item" :src="item" controls="true" autoplay="false" style="height: 120px;margin: 30px 30px 0 0;"></video>
              </div>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="图片：" v-else>
          <div>暂无图片</div>
        </el-form-item>
          <el-form-item label="位置:" >
            <div>{{form.position}}</div>
          </el-form-item>
        <el-form-item>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>

  </div>
</template>
<script>
import {detail, save} from "@/api/record";
import {getForm} from "@/utils/utils";
import { getToken } from '@/utils/auth'

export default {
  components: {},
  props:{
    id:{
      default:null
    }
  },
  data(){
    return{
      myHeaders: { "X-Token": getToken() },
      form:{
        id:null,
        username:'',
        content:'',
        position:'',
        typeText:'',
        multiMedia:'',
        picList:[],
        videoList:[],
      },

      rules:{
        username: [{ required: true, message: '请输入用户名称', trigger: ['blur'] }],
        content: [{ required: true, message: '请输入记录', trigger: ['blur'] }],
        position: [{ required: true, message: '请输入位置', trigger: ['blur'] }],
        multiMedia: [{ required: true, message: '请上传图片', trigger: ['blur'] }],
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
      uploads:{
        show:false,
        multiple:true,
      }
    }
  },
  mounted() {
    if(this.id){
      this.getDetail();
    }
  },
  methods:{
    getFile(fileList){
      this.form.multiMedia = fileList[0]
      this.uploads.show = false
    },
    getDetail(){
      this.formLoading=true
      detail(this.id).then(res=>{
        getForm(res,this.form);
        this.form.picList=res.url? res.url.split(',') : []
        this.form.videoList=res.videoUrl? res.videoUrl.split(',') : []
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    handlerSubmit(){
      if(this.saveLoading||this.formLoading){
        return;
      }
      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })
    },
    close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-icon-picture-outline::before{
    width: 100%;
    height: 100%;
  }
}
</style>
